import React,{useState} from 'react'
import { Checkbox, Button } from 'antd';


export default function CheckBox() {
    const [checked,setChecked] = useState(true)
    const [disabled,setDisabled] = useState(false)

    
      const toggleChecked = () => {
          setChecked(!checked)
      };
    
      const toggleDisable = () => {
          setDisabled(!disabled)
      };
    
      const onChange = e => {
        console.log('checked = ', e.target.checked);
        setChecked(e.target.checked)
      };
    
    const label = `${checked ? 'Checked' : 'Unchecked'}-${
        disabled ? 'Disabled' : 'Enabled'
      }`;
  return (
    <div>
        
        {/* <p style={{ marginBottom: '20px' }}>
          <Checkbox
            checked={checked}
            disabled={disabled}
            onChange={onChange}
          >
            {label}
          </Checkbox>
        </p> */}
        <p>
          <Button type="primary" size="small" onClick={toggleChecked}>
            {!checked ? 'Check' : 'Uncheck'}
          </Button>
          <Button
            style={{ margin: '0 10px' }}
            type="primary"
            size="small"
            onClick={toggleDisable}
          >
            {!disabled ? 'Disable' : 'Enable'}
          </Button>
        </p>
    </div>
  )
}
